<template>
    <div class="hvideo">
        <div class="HotList-list"   v-for="item in bothdata" style="margin-top: 20px"  >
            <section class="HotItem" >
                <div class="HotItem-index">
                    <div class="HotItem-hot">{{item.id}}</div>
                </div>
                <div class="HotItem-content">
                    <a :href="item.lian"  @click="handleShow(i)" title="" target="_blank">
                        <h2 class="HotItem-title" style="font-size: 18px;">{{item.title}}</h2>
                        <p class="HotItem-excerpt" style="font-size: 15px;">{{item.content}}</p>   </a>
                    <div class="HotItem-metrics HotItem-metrics--bottom">
                        <span class="el-icon-magic-stick">{{item.re}}</span>
                        <span class="HotItem-action">
                        <div class="Popover ShareMenu">
                        <span style="display: inline-flex; align-items: center;" class="el-icon-position">分享</span></div></span>
                    </div>
                </div>
                <a :href="item.lian" class="HotItem-img" target="_blank">
                    <img :src="item.img" alt="">
                    <!--                ::after-->
                </a>

            </section>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Video",
        data(){
            return{
                bothdata:[],
                one:{
                    background:"#EBF5FF",
                    color: '#999',
                    display:'none'
                },
                methods:{

                }
            }
        },
        mounted() {
            // 请求数据
            this.$axios.get('/api/video.json').then((res)=>{
                this.bothdata =res.data.data
                console.log(bothdata)
                // this.newTopicL =dt.newTopicL
                // this.newTopicR =dt.newTopicR
                // this.roundDiscuss =dt.roundDiscuss
                // this.roundDiscussR =dt.roundDiscussR
            }).catch((error)=>{
                console.log('请求失败！')
            })


        },
    }
</script>

<style scoped>
    .HotList-list{
        display: block;
    }
    .HotItem{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 16px 16px 16px 0;
        position: relative;
        background: #fff;
        border-bottom: rgba(133,144,166,.12) 1px solid;
    }
    .HotItem-content {
        -webkit-box-flex: 1;
        -ms-flex: 1 1;
        flex: 1 1;
        overflow: hidden;
    }
    .HotItem-index{
        text-align: center;
        width: 57px;
        display: block;
    }
    .HotItem-hot{
        font-weight: 600;
        font-synthesis: style;
        line-height: 1.6;
        font-size: 18px;
        /*color: #999;*/
        text-align: center;
        width: 57px;
        color: #ff9607;
    }
    a {
        color: inherit;
        text-decoration: none;
        cursor: pointer;
    }
    .HotItem-title {
        font-size: 18px;
        line-height: 28px;
        max-height: 56px;
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-weight: 600;
        font-synthesis: style;
        color: #121212;
    }
    h1, h2, h3 {
        margin: 0;
        font: inherit;
    }
    h2 {
        display: block;
        font-size: 1.5em;
        margin-block-start: 0.83em;
        margin-block-end: 0.83em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
    }
    .HotItem-excerpt {
        line-height: 25px;
        margin-top: 2px;
        min-height: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #444;
    }

    body, button, p, pre {
        margin: 0;
    }
    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }
    .HotItem-metrics--bottom {
        bottom: 16px;
        position: absolute;
    }
    .HotItem-metrics {
        font-size: 14px;
        height: 16px;
        margin-top: 8px;
    }
    .HotItem-metrics {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #8590a6;
    }

    /*    分享*/
    .HotItem-metrics .HotItem-action {
        margin-left: 28px;
    }
    .HotItem-metrics {
        font-size: 14px;
        height: 16px;
        margin-top: 8px;
    }
    .HotItem-metrics {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #8590a6;
    }
    .HotItem-img {
        display: block;
        height: 105px;
        margin-left: 16px;
        position: relative;
    }
    .HotItem-img:after {
        content: "";
        left: 0;
        position: absolute;
        top: 0;
        background-color: rgba(18,18,18,.05);
    }
    .HotItem-img:after, .HotItem-img img {
        border-radius: 4px;
        height: 105px;
        width: 190px;
    }


</style>